<template>
    <div class="chargingPileEnergyFlow_area" style="background:grey">
        <div class="energyFlow_area">
            <!-- 顶端容器 -->
            <div class="topContainer_area">头部</div>

            <!-- 主体开始 -->
            <div class="energyFlow_content_area">

                <!-- 顶部首段能流 -->
                <template v-if="data.resultData.children.length > 1">
                    <!-- <div class="pathW aSurname_line">
                        <div ref="aSurnameEnergy" class="energH aSurname_line_energy"></div>
                    </div> -->
                    <div class="leftAndRightSegments_area">
                        <div class="pathH lf_line">
                            <div ref="lfEnergy" class="energW_lf lf_line_energy"></div>
                        </div>
                        <div class="pathH rg_line">
                            <div ref="rgEnergy" class="energW_rg rg_line_energy"></div>
                        </div>
                    </div>
                </template>

                <!-- 主要能流区域 -->
                <div class="energyContent_area"
                    :class="{ 'energyContent_area_flex': data.resultData.children.length !== 1 }">
                    <!-- <item :data="data.resultData.children"></item> -->
                    <div class="energyContent_area_item" v-for="(branchItem, index) in data.resultData.children">

                        <!-- 第一段能流 -->
                        <div class="pathW firstLineSection_line">
                            <div v-if="index == 0" ref="firstLineSectionEnergy"
                                class="energH firstLineSection_line_energy"
                                :class="{ 'runing': branchItem.state === 1 }"></div>
                            <div v-if="index == 1" ref="firstLineSectionEnergy1"
                                class="energH firstLineSection_line_energy"
                                :class="{ 'runing': branchItem.state === 1 }"></div>
                        </div>
                        <div class="corps_area">
                            {{ branchItem.name }}
                        </div>

                        <!-- 第二段能流 -->

                        <!-- 第二段能流 单支情况 -->
                        <template v-if="branchItem.children.length === 1">

                            <div class="pathW secondLineSection_line">
                                <template v-if="branchItem.children[0].state === 1">
                                    <div ref="secondLineSectionEnergy" class="energH secondLineSection_line_energy"
                                        :class="{ 'runing': branchItem.children[0].state === 1 }"></div>

                                </template>

                            </div>
                            <div>111</div>
                        </template>
                        <template v-else>
                            <div class="pathW branchShu_line">
                                <template
                                    v-if="branchItem.state === 1 && branchItem.children?.some((item: any) => item.state === 1)">
                                    <div ref="branchShuEnergy" class="energH branchShu_line_energy" />
                                </template>
                            </div>
                            <div class="leftAndRightbranch_area">
                                <div class="pathH lf_branch_line"
                                    :style="{ width: (branchWidth * branchItem.children.length) / 2 - branchWidth / 2 + 3 + 'px' }">
                                    <template
                                        v-if="branchItem.state === 1 && branchItem.children?.some((item: any) => item.state === 1)">
                                        <div ref="branchLfEnergy" class="energW_lf branchShuLf_line_energy" />
                                    </template>
                                </div>
                                <div class="pathH rg_branch_line"
                                    :style="{ width: (branchWidth * branchItem.children.length) / 2 - branchWidth / 2 + 3 + 'px' }">
                                    <template
                                        v-if="branchItem.state === 1 && branchItem.children?.some((item: any) => item.state === 1)">
                                        <div ref="branchRgEnergy" class="energW_rg branchShuRg_line_energy" />
                                    </template>
                                </div>
                            </div>
                        </template>
                        <!-- 图片 -->
                        <div class="corps_detail_content">
                            <div class="corps_detail_content_area" v-for="branchChildrenItem in branchItem.children">
                                <template v-if="branchItem.children.length > 1">
                                    <div class="pathW firstBranch_line">
                                        <template v-if="branchItem.state === 1 && branchChildrenItem.state === 1">
                                            <div ref="firstBranchLineSectionEnergy"
                                                class="energH firstBranchLineSection_line_energy"
                                                :class="{ 'runing': branchChildrenItem.state === 1 }"></div>
                                        </template>
                                    </div>
                                </template>
                                <div class="corps_bottom_detail">
                                    <div class="corps_bottom_detail_content">
                                        <label>{{ branchChildrenItem.name }}</label>

                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { h, ref, reactive, toRefs, nextTick, watchEffect, computed, watch, onUpdated, onBeforeUpdate, onBeforeMount, onMounted } from "vue";
import { aaa, bbb } from "./module.js";
import item from "./item.vue"
// 数据
const data = reactive({
    resultData: {
        children: []
    }
})

const speed = ref(0.5)// 能流速度
const count = ref(0)// 分支总个数
const branchWidth = ref(450)// 分支宽度

// 动画路径dom元素
const aSurnameEnergy = ref();
const lfEnergy = ref([]);
const rgEnergy = ref([]);
const firstLineSectionEnergy = ref([]);

const secondLineSectionEnergy = ref([]);
const branchShuEnergy = ref([]);
const branchLfEnergy = ref([]);
const branchRgEnergy = ref([]);
const firstBranchLineSectionEnergy = ref([]);

onMounted(async () => {
    await getData()
})

// 能流效果动画
const animateStart = () => {
    // 顶部首段能流
    if (aSurnameEnergy.value) {
        aSurnameEnergy.value?.classList.add('aSurnameLineAnimate');
    }
    let time = setTimeout(() => {
        if (lfEnergy.value) {
            lfEnergy.value?.classList.add('lfLineAnimate');
        }
        if (rgEnergy.value) {
            rgEnergy.value?.classList.add('rgLineAnimate');
        }
        clearTimeout(time)
    }, speed.value * 1000);

    // 时间分单个分支跟多个分支,时间不同
    let firstTime = (((branchWidth.value * count.value) / 4 / 50) * speed.value + 1 * speed.value) * 1000
    let secondTime = (((branchWidth.value * count.value) / 4 / 50) * speed.value + 2 * speed.value) * 1000
    if (data.resultData?.children?.length === 1) {
        firstTime = 0
        secondTime = 1000 * speed.value
    }
    let time1 = setTimeout(() => {
        firstLineSectionEnergy.value.forEach((el) => {
            if (el?.classList.contains('runing')) {
                el?.classList.add('firstLineAnimate');
            }
        });
        clearTimeout(time1)
    }, firstTime);

    // 分情况
    // 第一种情况
    let time2 = setTimeout(() => {
        secondLineSectionEnergy.value.forEach((el) => {
            if (el?.classList.contains('runing')) {
                el?.classList.add('secondLineAnimate');
            }
        });
        clearTimeout(time2)
    }, secondTime);

    // 第二种情况
    let time3 = setTimeout(() => {
        if (branchShuEnergy.value && branchShuEnergy.value[0]) {
            branchShuEnergy.value.forEach((el) => {
                el?.classList.add('branchShuLineAnimate');
            })
        }
        setTimeout(() => {
            if (branchLfEnergy.value && branchLfEnergy.value[0]) {
                branchLfEnergy.value.forEach((el) => {
                    el?.classList.add('lfBranchLineAnimate');
                })
            }
            if (branchRgEnergy.value && branchRgEnergy.value[0]) {
                branchRgEnergy.value.forEach((el) => {
                    el?.classList.add('rgBranchLineAnimate');
                })
            }
        }, speed.value * 1000);
        setTimeout(() => {
            firstBranchLineSectionEnergy.value.forEach((el) => {
                if (el?.classList.contains('runing')) {
                    el?.classList.add('firstBranchLineAnimate');
                }
            });
        }, speed.value * 2 * 1000);
        clearTimeout(time3)
    }, secondTime);
};

// 结束后清楚动画类.
const animateEnd = () => {
    if (aSurnameEnergy.value) {
        aSurnameEnergy.value?.classList.remove('aSurnameLineAnimate');
    }
    if (lfEnergy.value) {
        lfEnergy.value?.classList.remove('lfLineAnimate');
    }
    if (rgEnergy.value) {
        rgEnergy.value?.classList.remove('rgLineAnimate');
    }
    if (firstLineSectionEnergy.value) {
        firstLineSectionEnergy.value.forEach((el) => {
            el?.classList.remove('firstLineAnimate');
        });
    }

    if (secondLineSectionEnergy.value && secondLineSectionEnergy.value[0]) {
        secondLineSectionEnergy.value.forEach((el) => {
            el?.classList.remove('secondLineAnimate');
        });
    }
    if (branchShuEnergy.value && branchShuEnergy.value[0]) {
        branchShuEnergy.value.forEach((el) => {
            el?.classList.remove('branchShuLineAnimate');
        })
    }
    if (branchLfEnergy.value && branchLfEnergy.value[0]) {
        branchLfEnergy.value.forEach((el) => {
            el?.classList.remove('lfBranchLineAnimate');
        })
    }
    if (branchRgEnergy.value && branchRgEnergy.value[0]) {
        branchRgEnergy.value.forEach((el) => {
            el?.classList.remove('rgBranchLineAnimate');
        })
    }
    if (firstBranchLineSectionEnergy.value && firstBranchLineSectionEnergy.value[0]) {
        firstBranchLineSectionEnergy.value.forEach((el) => {
            el?.classList.remove('firstBranchLineAnimate');
        });
    }
};



// 获取数据
const getData = async () => {
    let res = aaa


    let arr = res.children.map((item) => item.children.length)
    let leng = res.children.length
    let leng1 = Math.max(...arr)
    let leng2 = Math.min(...arr)
    count.value = leng * leng1 - (leng1 - leng2)
    data.resultData = res

    // 循环播放能流
    await nextTick()

    let flag = data.resultData.children.some((item) => {
        return item.state === 1;
    });

    if (!flag) return

    initAnimtion()

    if (firstBranchLineSectionEnergy.value[0]) {
        let index = firstBranchLineSectionEnergy.value.findIndex((item) => [item][0].className.includes('runing'))
        index !== -1 && firstBranchLineSectionEnergy.value[index].addEventListener('animationend', () => {
            animateEnd();
            initAnimtion()
        });
    } else if (secondLineSectionEnergy.value[0]) {
        let index = secondLineSectionEnergy.value.findIndex((item) => [item][0].className.includes('runing'))
        index !== -1 && secondLineSectionEnergy.value[index].addEventListener('animationend', () => {
            animateEnd();
            initAnimtion()
        });
    } else {
        let index = firstLineSectionEnergy.value.findIndex((item) => [item][0].className.includes('runing'))
        index !== -1 && firstLineSectionEnergy.value[index].addEventListener('animationend', () => {
            animateEnd();
            initAnimtion()
        });
    }
}

// 执行动画
const initAnimtion = () => {
    let time = setTimeout(() => {
        animateStart();
        clearTimeout(time)
    }, 500);
}
</script>
<!-- <style lang="scss"  src="./index.scss"></style> -->
<style lang="scss" scoped>
.aSurnameLineAnimate {
    animation: aSurnameAM v-bind("speed + 's'") linear;
}

.lfLineAnimate {
    animation: lfAM v-bind("((branchWidth * count) / 4 / 50) * speed + 's'") linear;
}

.rgLineAnimate {
    animation: rgAM v-bind("((branchWidth * count) / 4 / 50) * speed + 's'") linear;
}

.rgLineAnimate1 {
    animation: rgAM1 v-bind("((branchWidth * count) / 4 / 50) * speed + 's'") linear;
}

.firstLineAnimate {
    animation: firstLineAM v-bind("speed + 's'") linear;
}

.secondLineAnimate {
    animation: secondLineAM v-bind("speed + 's'") linear;
}

.branchShuLineAnimate {
    animation: branchShuLineAM v-bind("speed + 's'") linear;
}

.lfBranchLineAnimate {
    animation: lfBranchAM v-bind("speed + 's'") linear;
}

.rgBranchLineAnimate {
    animation: rgBranchAM v-bind("speed + 's'") linear;
}

.firstBranchLineAnimate {
    animation: firstBranchLineAM v-bind("speed + 's'") linear;
}

.chargingPileEnergyFlow_area {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    position: relative;

    .detailInfo_area {
        position: absolute;
        width: 202px;
        height: 462px;
        // border: 1px solid red;
        top: 338px;
        left: 92px;
        z-index: 9999;
        background: url('./imgs/detail_bg.png') no-repeat;
        background-size: contain;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding: 25px 25px;

        .detailInfo_area_item {
            display: flex;
            width: 100%;
            // border: 1px solid red;
            height: fit-content;

            .detailInfo_area_item_lf {
                width: 18px;
                height: 20px;
                // background-color: red;
                margin-right: 5px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .detailInfo_area_item_rg {
                display: flex;
                flex-direction: column;
                box-sizing: border-box;
                padding-top: 3px;

                label {
                    font-family: SourceHanSansKRegular;
                    font-weight: 400;
                    font-size: 12px;
                    color: #C4E1FF;
                    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.44);
                    font-style: normal;
                    margin-bottom: 5px;
                    flex-shrink: 0;
                }

                span {
                    font-family: DINMedium;
                    font-weight: 500;
                    font-size: 14px;
                    color: #E6F1FA;
                    font-style: normal;

                    span {
                        font-size: 12px;
                        color: #EDF8FF;
                        margin-left: 5px;
                    }
                }
            }
        }
    }

    .energyFlow_area {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        // border: 1px solid red;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .topContainer_area {
            width: 201px;
            height: 66px;
            background-color: red;
            background: url('@/assets/images/wangdianzhuanghsi_bg.png') no-repeat;
            background-size: 100% 100%;
            margin-bottom: 10px;
        }

        .energyFlow_content_area {
            width: fit-content;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            // 关于能流样式
            // 线段路径统一样式
            .pathH {
                height: 6px;
                box-shadow: inset 0px 0px 2px 2px rgba(111, 182, 255, 0.6);
            }

            .pathW {
                width: 6px;
                box-shadow: inset 0px 0px 2px 2px rgba(111, 182, 255, 0.6);
            }

            // 能流统一样式
            .energH {
                height: 34px;
                background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
                border-radius: 3px;
                filter: blur(1px);
            }

            .energW_lf {
                width: 34px;
                background: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
                border-radius: 3px;
                filter: blur(1px);
            }

            .energW_rg {
                width: 34px;
                background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
                border-radius: 3px;
                filter: blur(1px);
            }

            .aSurname_line {
                height: 30px;
                position: relative;

                .aSurname_line_energy {
                    width: 0px;
                    position: absolute;
                    top: -20px;
                }
            }

            .leftAndRightSegments_area {
                display: flex;

                .lf_line {
                    width: v-bind("(branchWidth * count) / 2 - branchWidth / 2 + 3 + 'px'");
                    position: relative;

                    .lf_line_energy {
                        height: 0px;
                        position: absolute;
                        right: 0px;
                    }
                }

                .rg_line {
                    width: v-bind("(branchWidth * count) / 2 - branchWidth / 2 + 3 + 'px'");
                    position: relative;

                    .rg_line_energy {
                        height: 0px;
                        position: absolute;
                        left: 0px;
                    }
                }
            }

            .energyContent_area {
                width: v-bind("branchWidth * count + 'px'");
                // width: 1194px;
                // 这里的宽度=(几个分支+1)*每个分支宽度-path的宽度

                &.energyContent_area_flex {
                    display: flex;
                    justify-content: space-between;
                }

                .energyContent_area_item {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    position: relative;

                    .firstLineSection_line {
                        height: 60px;
                        position: relative;

                        .firstLineSection_line_energy {
                            width: 0px;
                            position: absolute;
                            top: 0px;
                        }
                    }

                    .corps_area {
                        width: v-bind("branchWidth + 'px'");
                        height: 237px;
                        display: flex;
                        justify-content: center;
                        margin-top: 10px;
                        // border: 1px solid red;
                        position: relative;

                        .popover_area {
                            position: absolute;
                            top: -25px;
                            left: 305px;
                        }

                        .corps_area_content {
                            width: 160px;
                            height: 100%;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            // border: 1px solid yellow;

                            label {
                                width: 124px;
                                height: 32px;
                                background: url('@/assets/imagesPicture/TITLE_124_32.png') no-repeat;
                                background-size: contain;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                font-family: PanMenZhengDao;
                                font-weight: normal;
                                font-size: 14px;
                                color: #E6FCFF;
                                text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.44);
                                font-style: normal;
                            }

                            .picture_PDG {
                                width: 160px;
                                height: 208px;
                                background: url('@/assets/imagesPicture/PDG_160_208.png') no-repeat;
                                background-size: contain;
                            }

                            .picture_LYQ {
                                width: 160px;
                                height: 208px;
                                background: url('@/assets/imagesPicture/LYQ_160_208.png') no-repeat;
                                background-size: contain;
                            }
                        }
                    }

                    .secondLineSection_line {
                        height: 60px;
                        position: relative;
                        // 这个要设置外边距的高度跟下面图形高度一致
                        margin-bottom: 237px;

                        .secondLineSection_line_energy {
                            width: 0px;
                            position: absolute;
                            top: 0px;
                        }
                    }

                    .branchShu_line {
                        height: 25px;
                        position: relative;

                        .branchShu_line_energy {
                            width: 0px;
                            position: absolute;
                            top: -25px;
                        }
                    }

                    .leftAndRightbranch_area {
                        display: flex;
                        position: absolute;
                        top: 184px;

                        .lf_branch_line {
                            position: relative;

                            .branchShuLf_line_energy {
                                height: 0px;
                                position: absolute;
                                right: 0px;
                            }
                        }

                        .rg_branch_line {
                            position: relative;

                            .branchShuRg_line_energy {
                                height: 0px;
                                position: absolute;
                                left: 0px;
                            }
                        }
                    }

                    .corps_detail_content {
                        display: flex;
                        position: absolute;
                        top: 380px;
                        // border: 1px solid yellow;

                        .corps_detail_content_area {
                            display: flex;
                            position: relative;

                            .firstBranch_line {
                                height: 30px;
                                position: absolute;
                                left: 50%;
                                top: -32px;
                                transform: translateX(-50%);

                                .firstBranchLineSection_line_energy {
                                    width: 0px;
                                    position: absolute;
                                    top: -12px;
                                }
                            }

                            .corps_bottom_detail {
                                width: v-bind("branchWidth + 'px'");
                                height: 329px;
                                // border: 1px solid red;
                                display: flex;
                                justify-content: center;
                                position: relative;

                                .corps_bottom_detail_content {
                                    width: 160px;
                                    height: 100%;
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    // border: 1px solid yellow;

                                    label {
                                        width: 124px;
                                        height: 32px;
                                        background: url('@/assets/imagesPicture/TITLE_124_32.png') no-repeat;
                                        background-size: contain;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        font-family: PanMenZhengDao;
                                        font-weight: normal;
                                        font-size: 14px;
                                        color: #E6FCFF;
                                        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.44);
                                        font-style: normal;
                                    }

                                    .capacity {
                                        font-family: SourceHanSansKRegular;
                                        font-weight: 400;
                                        font-size: 12px;
                                        color: #C4E1FF;
                                        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.44);
                                        font-style: normal;
                                        display: flex;
                                        align-items: center;
                                        margin-top: 5px;

                                        span {
                                            font-family: DINMedium;
                                            font-weight: 500;
                                            font-size: 16px;
                                            color: #26E6FF;
                                            font-style: normal;
                                            margin: 0 5px;
                                        }
                                    }

                                    .picture {
                                        width: 160px;
                                        height: 208px;
                                    }

                                    .picture_CDZ {
                                        background: url('@/assets/imagesPicture/CDZ_160_208.png') no-repeat;
                                        background-size: contain;
                                        cursor: pointer;


                                    }

                                    .picture_CDZ_active {
                                        background: url('@/assets/imagesPicture/CDZ_160_208_active.png') no-repeat;
                                        background-size: contain;
                                    }

                                    .picture_V2G {
                                        background: url('@/assets/imagesPicture/V2G_160_208.png') no-repeat;
                                        background-size: contain;
                                        cursor: pointer;
                                    }

                                    .picture_V2G_active {
                                        background: url('@/assets/imagesPicture/V2G_160_208_active.png') no-repeat;
                                        background-size: contain;
                                    }

                                    .status {
                                        display: flex;
                                        justify-content: center;
                                        align-items: flex-end;

                                        img {
                                            width: 44px;
                                            height: 35px;
                                            transform: translateX(-8px);
                                        }

                                        span {
                                            font-family: SourceHanSansKRegular;
                                            font-weight: 400;
                                            font-size: 14px;
                                            color: #FFBA6C;
                                            font-style: normal;
                                            transform: translateY(-3px);
                                            margin-left: 3px;
                                        }
                                    }

                                    .soc {
                                        font-family: SourceHanSansKRegular;
                                        font-weight: 500;
                                        font-size: 12px;
                                        color: #FE96FF;
                                        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.44);
                                        font-style: normal;
                                        display: flex;
                                        align-items: center;
                                        margin-top: 6px;

                                        span {
                                            font-family: DINMedium;
                                            font-weight: 500;
                                            font-size: 18px;
                                            color: #E6FCFF;
                                            font-style: normal;
                                            background: linear-gradient(180deg, #FCEBFF 0%, #FCEBFF 30%, #FE96FF 100%);
                                            -webkit-background-clip: text;
                                            background-clip: text;
                                            -webkit-text-fill-color: transparent;
                                            margin: 0 4px 0 10px;
                                        }
                                    }
                                }

                                .popover_area {
                                    position: absolute;
                                    top: -10px;
                                    left: 305px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

}

// 能流动画
@keyframes aSurnameAM {
    0% {
        width: 6px;
    }

    100% {
        width: 6px;
        top: 4px;
    }
}

@keyframes lfAM {
    0% {
        height: 6px;
    }

    100% {
        height: 6px;
        right: calc(100% - 34px);
    }
}

@keyframes rgAM {
    0% {
        height: 6px;
    }

    100% {
        height: 6px;
        left: calc(100% - 34px);
    }
}

@keyframes firstLineAM {
    0% {
        width: 6px;
    }

    100% {
        width: 6px;
        top: 34px;
    }
}

@keyframes secondLineAM {
    0% {
        width: 6px;
    }

    100% {
        width: 6px;
        top: 34px;
    }
}

@keyframes branchShuLineAM {
    0% {
        width: 6px;
    }

    100% {
        width: 6px;
        top: -5px;
    }
}

@keyframes lfBranchAM {
    0% {
        height: 6px;
    }

    100% {
        height: 6px;
        right: calc(100% - 34px);
    }
}

@keyframes rgBranchAM {
    0% {
        height: 6px;
    }

    100% {
        height: 6px;
        left: calc(100% - 34px);
    }
}

@keyframes firstBranchLineAM {
    0% {
        width: 6px;
    }

    100% {
        width: 6px;
        top: 6px;
    }
}
</style>
